/*
    创建者：shuxiaokai
    创建时间：2021-09-17 22:39
    模块名称：
    备注：
*/
<template>
    <div class="params-template">
        <s-resize-x v-if="0" :min="500" :max="900" :width="500" name="paramsTemplate" class="left">
            <el-tabs v-model="activeName">
                <!-- 新增模板 -->
                <el-tab-pane :label="$t('新增模板')" name="s-add">
                    <el-form ref="form" inline :model="addData" :rules="rules" label-width="120px">
                        <el-form-item :label="`${$t('参数名称')}：`" prop="name">
                            <el-input v-model="addData.name" :size="config.renderConfig.layout.size" :placeholder="$t('例如：默认返回值')" class="w-100" maxlength="8" clearable show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item :label="`${$t('参数类型')}：`" prop="presetParamsType">
                            <el-select v-model="addData.presetParamsType" :size="config.renderConfig.layout.size" :placeholder="$t('请选择参数类型')" class="w-100">
                                <el-option :label="$t('请求参数(Params)')" value="queryParams"></el-option>
                                <el-option :label="$t('请求参数(Body)')" value="requestBody"></el-option>
                                <el-option :label="$t('返回参数')" value="responseParams"></el-option>
                            </el-select>
                        </el-form-item>
                        <div class="scroll-y-450">
                            <s-params-tree nest :data="addData.items"></s-params-tree>
                        </div>
                        <div class="d-flex j-end">
                            <el-button :loading="loading2" type="success" @click="handleAddTemplate">{{ $t("确认新增") }}</el-button>
                        </div>
                    </el-form>
                </el-tab-pane>
                <!-- 修改模板 -->
                <el-tab-pane :label="$t('修改模板')" name="s-edit">
                    <s-loading :loading="loading">
                        <el-form v-if="editData._id" ref="form" :model="editData" :rules="rules" label-width="120px">
                            <el-form-item :label="`${$t('参数名称')}：`" prop="name">
                                <el-input v-model="editData.name" :size="config.renderConfig.layout.size" :placeholder="$t('例如：默认返回值')" class="w-80" maxlength="8" clearable show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item :label="`${$t('参数类型')}：`" prop="type">
                                <el-select v-model="editData.presetParamsType" :size="config.renderConfig.layout.size" :placeholder="$t('请选择参数类型')">
                                    <el-option :label="$t('请求参数')" value="request"></el-option>
                                    <el-option :label="$t('返回参数')" value="response"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="scroll-y-450">
                                <s-collapse-card :title="$t('参数模板')">
                                    bbbb
                                </s-collapse-card>
                            </div>
                            <div class="d-flex j-end">
                            </div>
                        </el-form>
                    </s-loading>
                </el-tab-pane>
            </el-tabs>
        </s-resize-x>
        <s-table
            ref="table"
            url="/api/project/doc_preset_params_list"
            :params="{projectId: $route.query.id}"
            delete-many
            delete-url="/api/project/doc_preset_params"
            delete-key="ids"
            class="w-100"
            @deleteMany="handleDeleteSuccess"
        >
            <el-table-column :label="$t('模板名称')" align="center">
                <template #default="scope">
                    <el-input v-if="scope.row.__active" v-model="scope.row.name" :size="config.renderConfig.layout.size" class="w-100" maxlength="8" clearable show-word-limit></el-input>
                    <span v-else>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('创建者名称')" prop="creatorName" align="center"></el-table-column>
            <el-table-column label="模板类型" prop="presetParamsType" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.presetParamsType === 'bodyParams'">请求参数(Body)</el-tag>
                    <el-tag v-if="scope.row.presetParamsType === 'responseParams'">返回参数</el-tag>
                </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center">
                <template #default="scope">
                    <!-- <el-button link type="primary" text @click="handleChangeOpToEdit(scope.row)">编辑</el-button> -->
                    <el-button link type="primary" text @click="handleDelete(scope.row._id)">{{ $t("删除") }}</el-button>
                </template>
            </el-table-column>
        </s-table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import type { ApidocProjectParamsTemplate, ApidocTab } from "@@/store"
import type { Response, ApidocProperty } from "@@/global"

type EditInfo = {
    _id: string,
    items: ApidocProperty[]
}

export default defineComponent({
    emits: ["success"],
    data() {
        return {
            //=================================表单与表格参数================================//
            addData: {
                name: "", //-----------------------------------模板名称
                presetParamsType: "", //------------模板类型
                items: [] as ApidocProperty[], //----------------------------------参数信息
            },
            editData: {
                _id: "", //------------------------------------模板id
                name: "", //-----------------------------------模板名称
                presetParamsType: "", //------------模板类型
                items: [] as ApidocProperty[], //----------------------------------参数信息
            },
            //===================================枚举参数====================================//
            rules: {
                name: [{ required: true, message: this.$t("请输入模板名称"), trigger: "blur" }],
                presetParamsType: [{ required: true, message: this.$t("请选择模板类型"), trigger: "change" }],
            },
            //===================================业务参数====================================//

            //===================================其他参数====================================//
            activeName: "s-add", //当前tab切换状态
            loading: false, //----------------------编辑加载效果
            loading2: false, //---------------------添加按钮加载效果
            loading3: false, //---------------------修改按钮加载效果
        };
    },
    computed: {
        currentSelectTab() {
            const projectId = this.$route.query.id as string;
            if (this.$store.state["apidoc/tabs"].tabs[projectId]) {
                return this.$store.state["apidoc/tabs"].tabs[projectId].find(v => v.selected)
            }
            return null;
        },
    },
    watch: {
        currentSelectTab: {
            handler(val: ApidocTab | null) {
                if (val && val.tabType === "paramsTemplate") {
                    console.log(val)
                    this.$refs.table.getData();
                }
            },
            deep: true,
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        //初始化
        init() {
            this.addData.items.push(this.$helper.apidocGenerateProperty());
        },
        //新增模板
        handleAddTemplate() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    const params = {
                        projectId: this.$route.query.id,
                        ...this.addData,
                    };
                    this.loading2 = true;
                    this.axios.post("/api/project/doc_preset_params", params).then(() => {
                        this.$refs.table.getData();
                        this.$store.commit("apidoc/addPresetParams", params);
                        this.$emit("success")
                    }).catch((err) => {
                        console.error(err);
                    }).finally(() => {
                        this.loading2 = false;
                    });
                }
            });
        },
        //修改参数信息
        handleChangeOpToEdit(row: ApidocProjectParamsTemplate) {
            this.activeName = "s-edit";
            if (this.loading) {
                return;
            }
            this.loading = true;
            const params = {
                projectId: this.$route.query.id,
                _id: row._id,
            };
            this.axios.get<Response<EditInfo>, Response<EditInfo>>("/api/project/doc_preset_params", { params }).then((res) => {
                this.editData.name = row.name;
                this.editData._id = res.data._id;
                this.editData.presetParamsType = row.presetParamsType;
                this.editData.items = [];
                const lastItem = res.data.items[res.data.items.length - 1];
                res.data.items.forEach((val) => {
                    this.editData.items.push(val);
                })
                if (lastItem.key || lastItem.value) {
                    this.editData.items.push(this.$helper.apidocGenerateProperty())
                }
            }).catch((err) => {
                console.error(err);
            }).finally(() => {
                this.loading = false;
            });
        },
        //删除模板
        handleDelete(id: string) {
            this.$confirm(this.$t("此操作将永久删除此条记录, 是否继续?"), "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                const params = {
                    ids: [id],
                    projectId: this.$route.query.id,
                };
                this.axios.delete("/api/project/doc_preset_params", { data: params }).then(() => {
                    this.$refs.table.getData();
                    const allTemplate = this.$store.state["apidoc/baseInfo"].paramsTemplate;
                    const delIndex = allTemplate.findIndex(v => v._id === id);
                    this.$store.commit("apidoc/baseInfo/deleteParamsTemplate", delIndex)
                }).catch((err) => {
                    console.error(err);
                }).finally(() => {
                    this.loading = false;
                });
            }).catch((err: Error | string) => {
                if (err === "cancel" || err === "close") {
                    return;
                }
                console.error(err);
            });
        },
        //批量删除成功
        handleDeleteSuccess(ids: string[]) {
            this.$refs.table.getData();
            ids.forEach(id => {
                const allTemplate = this.$store.state["apidoc/baseInfo"].paramsTemplate;
                const delIndex = allTemplate.findIndex(v => v._id === id);
                this.$store.commit("apidoc/baseInfo/deleteParamsTemplate", delIndex)
            })
        },
    },
})
</script>

<style lang="scss">
.params-template {
    overflow: hidden;
    display: flex;
    padding: size(20);
    &>.left {
        flex: 0 0 auto;
        padding: size(10) size(20);
        border-right: 4px solid $gray-400;
    }
}
</style>
